<template>
  <div class="layout-container">
    <div class="layout-container-form flex space-between">

      <div class="layout-container-form-search">
        <el-input clearable="true" v-model="query.keyword" placeholder="请输入关键词进行检索" @change="getTableData(true)"></el-input>
        <el-button type="primary" icon="el-icon-search" class="search-btn" @click="getTableData(true)">搜索</el-button>
      </div>
    </div>
    <div class="layout-container-table">
      <Table
          ref="table"
          v-model:page="page"
          v-loading="loading"
          :showIndex="false"
          :showSelection="false"
          :data="tableData"
          @getTableData="getTableData"
      >
        <el-table-column
            prop="trade_id"
            label="订单号"
            align="center"
        />
        <el-table-column style="width: 50px" prop="item_thumb" label="缩略图" align="center" >
          <template  v-slot="{row}">
            <el-image
                alt=""
                :preview-src-list="[row.item_img]"
                :initial-index="4"
                style="width: 50px"
                :lazy="true"
                :src="row.item_img"></el-image>
          </template>
        </el-table-column>
        <el-table-column min-width="200px" show-overflow-tooltip prop="item_title" label="商品" align="left" />
        <el-table-column prop="status_text" label="状态" align="center" fixed="right" >
          <template v-slot="{row}">
            <el-tag type="success" v-if="row.tk_status==3">{{row.status_text}}</el-tag>
            <el-tag type="primary" v-if="row.tk_status==12">{{row.status_text}}</el-tag>
            <el-tag type="warning" v-if="row.tk_status==13">{{row.status_text}}</el-tag>
            <el-tag type="default" v-if="row.tk_status==14">{{row.status_text}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="alipay_total_price"
            label="实付金额"
            align="center" />

        <el-table-column prop="commission_rate" label="佣金比率（%）" align="center" />
        <el-table-column prop="commission" label="佣金" align="center" />
        <el-table-column prop="modified_time" label="更新时间" align="center" />
        <el-table-column prop="tk_create_time" label="下单时间" align="center" />

      </Table>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, reactive } from 'vue'
import Table from '@/components/table/index.vue'
import req from '@/utils/system/req'
export default defineComponent({
  name: '归集订单',
  components: {
    Table,

  },
  setup() {
    // 存储搜索用的数据
    const query = reactive({
      keyword: ''
    })


    // 分页参数, 供table使用
    const page = reactive({
      index: 1,
      size: 10,
      total: 0
    })
    const loading = ref(true)
    const tableData = ref([])
    const chooseData = ref([])

    // 获取表格数据
    // params <init> Boolean ，默认为false，用于判断是否需要初始化分页
    const getTableData = (init) => {
      loading.value = true
      if (init) {
        page.index = 1
      }
      let params = {
        page: page.index,
        pageSize: page.size,
        ...query
      }
      req({
        url: '/order/tb_list',
        method: 'post',
        data: params
      })
          .then(res => {
            let data = res.data
            tableData.value = data.data
            page.total = Number(data.total)
          })
          .catch(error => {
            tableData.value = []
            page.index = 1
            page.total = 0
          })
          .finally(() => {
            loading.value = false
          })
    }


    getTableData(true)
    return {
      query,
      tableData,
      chooseData,
      loading,
      page,
      getTableData
    }
  }
})
</script>

<style lang="scss" scoped>

</style>